<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>
	<script src="js/jquery.scrollUp.min.js"></script>
	
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/labs.css">
 
	<style type="text/css">
		body {
			background: url("images/bg.gif")  repeat;
		}
		#main {
			background-color: #FFFFFF;
		}
		.st-txt {
			width: 30%;
			min-width: 150px;
		}
		#scrollUp {
		    background-image: url("images/top.png");
		    bottom: 20px;
		    right: 20px;
		    width: 38px;    
		    height: 38px;   
		}
	</style>
	<script>
	$(function() {
		//返回顶部 start
        $.scrollUp({
            animation: 'fade',
            activeOverlay: '#00FFFF',
            scrollImg: {
                active: true,
                type: 'background',
                src: 'images/top.png'
            }
        });
		$('.image-switch').addClass('active');
		
		//实例化UE编辑器
		var ue = UE.getEditor('editor');

		$("#smt").on("click", function(e){
			var name = $('#name').val();
			var title = $('#title').val();
			var content = ue.getContent();
			var em = "<blockquote><span class='label label-primary'>" +
				title + "</span><small><b>" +
				name + "</b> <cite> 发表于 2014.12.13 13:15</cite></small>" + 
				content + "</blockquote>";
			$('#msg').append(em);
		});
		
	});
	</script>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-xs-0 col-sm-1 col-md-2 column"> </div>
			<div id="main" class="col-xs-12 col-sm-10 col-md-8 column ">
				<div id="msg">
				  
				
				<div class="page-header">
					<h1> 留言板 <small> Message board</small></h1>
				</div>
				<blockquote>
					<span class="label label-primary">PHP很好用</span>
					<small><b>Fini</b> <cite> 发表于 2014.12.12 12:09</cite></small>
					<p>
						用PHP开发个留言板什么的太简单了！
					</p>
				</blockquote>
				<blockquote>
					<span class="label label-primary">PHP也很强大</span>
					<small><b>Fini</b> <cite> 发表于 2014.12.12 12:11</cite></small>
					<p>
						PHP还能开发CMS、电子商城、ERP、CRM、OA等项目，还有最近比较火的微信开发
					</p>
				</blockquote>
				<blockquote>
					<span class="label label-primary">楼上正解</span>
					<small><b>Bale</b> <cite> 发表于 2014.12.13 13:15</cite></small>
					<p>
						楼上说的很好，我也是一名PHP程序猿，喜欢研究技术...
					</p>
				</blockquote>
				<blockquote>
					<span class="label label-primary">那我也来学习一下</span>
					<small><b>Messi</b> <cite> 发表于 2014.12.14 08:21</cite></small>
					<p>
						既然都说PHP不错，那我也来学习一下，就是不知道难不难
					</p>
					<!-- <blockquote>
						<small><b>管理员</b> <cite> 回复于 2014.12.15 20:19</cite></small>
						<p>
							大家的留言应该让你消除顾虑了吧，加油哦！
						</p>
					</blockquote> -->
				</blockquote>
				<blockquote>
					<span class="label label-primary">PHP学起来很简单的</span>
					<small><b>Ronaldo</b> <cite> 发表于 2014.12.15 15:30</cite></small>
					<p>
						楼上的放心学吧，PHP学起来很简单的，有很多书籍、文档可以参考，不过最好有老师带一下
					</p>
					
				</blockquote>
				</div>
				<hr />
				<form role="form">
					<div class="form-group">
						<label>昵称</label>
						<input type="text" class="st-txt form-control" id="name" placeholder="请输入昵称"/>
					</div>
					<div class="form-group">
						<label>标题</label>
						<input type="text" class="st-txt form-control" id="title" placeholder="请输入标题"/>
					</div>
					<div class="form-group">
						<label>内容</label>
						<script id="editor" type="text/plain" style="width:100%;height:100px;" ></script>
						<!-- <textarea class="form-control" id="content" placeholder="文明上网，理性发言:)" rows="4"></textarea> -->
					</div>

					<button id="smt" type="button" class="btn btn-success">
						 发表 
					</button>
				</form>
				<p></p>
				<hr />
				<p class="text-center text-info"><small>Copyright © 2014 - Power by Fini</small></p>
			</div>
			<div class="col-xs-0 col-sm-1 col-md-2 column"></div>
		</div>
	</div>
</body>
</html>

